<template>
  <div class="home-page">
    <van-tabs>
      <van-tab  v-for="item in list" :title="item.name" :key="item.id">
        <article-item :id="item.id"></article-item>
      </van-tab>
      <div class="btn-wrapper">
      <geek-icon name="search"></geek-icon>
      <geek-icon  @click.native="popup" name="channel"></geek-icon>
      <van-popup v-model="show" position="right"  :style="{ height: '50%' }" />
    </div>
    </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'
import geekIcon from '@/components/geek-icon.vue'
import ArticleItem from '@/components/article-item.vue'
export default {
  components: { geekIcon, ArticleItem },
  data () {
    return {
      list: [],
      show: false
    }
  },
  async created () {
    const res = await axios.get('http://toutiao.itheima.net/v1_0/channels')
    console.log(res.data.data.channels)
    this.list = res.data.data.channels
  },
  methods: {
    popup () {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.home-page {
  .btn-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    .geek-icon {
      flex: 1;
      text-align: center;
      font-size: 18px;
    }
    &::before {
      content: "";
      width: 20px;
      height: 44px;
      position: absolute;
      left: -20px;
      top: 0;
      background: linear-gradient(to right, rgba(255,255,255,0), #fff);
    }
  }
}

</style>
